<template>
  <div class="choose">
    <ul>
      <li
        v-for="(item, index) in chooseLi"
        :class="{ chooseActive: activePage === index }"
        @click="activeClick(index)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chooseLi: [
        {
          name: "农村大数据",
          path: '/sync'
        },
        {
          name: "农民大数据",
          path: '/synm'
        },
        {
          name: "农业大数据",
          path: '/syny'
        },
      ],
      activePage: 0,
    };
  },
  methods: {
    activeClick(index) {
      this.activePage = index;
      this.$emit("parentActive", {index,path: this.chooseLi[index].path});
    }
  },
};
</script>

<style lang="scss" scoped>
.choose {
  position: fixed;
  top: 5rem;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
  width: 50rem;

  ul {
    display: flex;
    justify-content: center;

    li {
      padding: 0.5rem 0.9375rem;
      text-align: center;
      font-size: 0.875rem;
      color: #10a6c0;
      background: url(~assets/img/sy/choose.png) no-repeat center center;
      background-size: 100% 100%;
      cursor: pointer;
      margin: 0 0.9375rem;
      font-family: '黑体';
    }

    .chooseActive {
      color: #00daff;
      font-weight: bold;
    }
  }

  
}
</style>